import React from 'react'
import { Icon} from 'antd-mobile'
import './index.less';

interface IStepProps {
  /**
   * 标题
   */
  titleList?: string[];
  /**
   * 当前步索引
   */
  current: number|string;
}
const Step: React.FC<IStepProps> = (props) => {
  const {titleList=['基本信息','电子签约','提交审核'], current} = props
  let currentIndex = 0
  if(typeof current === 'number'){
    currentIndex = current
  }else {
    currentIndex = titleList.findIndex(item => item === current)
  }
  return (
    <>
      <div className="step_container">
        {
          titleList.length > 0 && titleList.map((item, index) => {
            return (
              <div key={index} className={`step_item ${currentIndex >= index ? 'step_item_actived' : ''}`}>
                {item}
                {
                  currentIndex > index ? 
                  <Icon type="check-circle-o" className="step_item_finished_icon"/>
                  
                  :
                  <span className={`step_item_circle ${currentIndex === index ? 'step_item_actived' : ''}`}></span>
                }
                {
                  currentIndex >= index ? <div className="step_item_line"></div> : ''
                }
              </div>
            )
          })
        }
      </div>
    </>
  )
}
export default Step;
